<script setup lang="js">
import { onBeforeMount, onMounted, ref, watch, watchEffect } from 'vue'
import Loading from '@/components/Loading.vue'
import Article from '@/dto/Article'
import { ossResourceServer } from '@/apis/OssResourceServer'
import { microServiceHttpServer } from '@/apis/MicroServiceHttpServer'

const article = ref(null)
const loading = ref(true)
const coverLoading = ref(true)
const cover = ref(null)
const coverBlob = ref('')

let retryCount = 0

function onLoadSuccess(response){
  console.log(response)
  article.value = JSON.parse(response.data)[0]
  loading.value = false
}
async function loadCover(){
  return ossResourceServer.getOssResource(article.value.thumbnail)
}

function onLoadFailure(error){
  console.log(error)
  //re-try if caused by network error
  if (error.response) {
    // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求已经成功发起，但没有收到响应
    // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
    // 而在node.js中是 http.ClientRequest 的实例
    microServiceHttpServer.getTopNArticles(1).then(onLoadSuccess, onLoadFailure)
    console.log(error.request);
  } else {
    // 发送请求时出了点问题
    console.log('Error', error.message);
  }
}
 function onLoadCoverSuccess(response){
  coverBlob.value = URL.createObjectURL(new Blob([response.data]))
  coverLoading.value = false
  watch(cover, (value, oldValue, onCleanup) => {
    if (value) {
      cover.value.src = coverBlob.value
    }
  }, {
    immediate: true
  })
}
 function onLoadCoverFailure(error){
   console.log(error)
   //re-try if caused by network error
   if (error.response) {
     // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
     console.log(error.response.data);
     console.log(error.response.status);
     console.log(error.response.headers);
   } else if (error.request) {
     // 请求已经成功发起，但没有收到响应
     // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
     //re-try if caused by network error
     loadCover().then(onLoadCoverSuccess, onLoadCoverFailure);
     console.log(error.request);
   } else {
     // 发送请求时出了点问题
     console.log('Error', error.message);
   }

}


async function tryLoadData(){
  microServiceHttpServer.getTopNArticles(1)
    .then(onLoadSuccess,onLoadFailure);
  watch(loading, (value, oldValue, onCleanup) => {
    if(!value){
      console.log("load cover")
      loadCover().then(onLoadCoverSuccess,onLoadCoverFailure);
    }
  })
}
onBeforeMount(tryLoadData)



</script>

<template>
  <div id="topOneArticleContainer" class="topOneArticleContainer">
      <div class="article__wrapper">

          <img class="article__cover" v-if="!coverLoading"  ref="cover"  alt=" " />
          <loading class="article__cover" v-else />


          <article class="article__body"  v-if="!loading">
            <a href=""><h2 class="title">{{ article.title }}</h2></a>
            <p class="digest">{{ article.summary }}</p>
            <footer class="footer">
              <address>{{ article.author }}</address>
              <time :datetime="article.createTime.toString()">{{ article.createTime }}</time>
              <span>{{ article.viewCount }}</span>
            </footer>
          </article>
          <loading class="article__body" v-else/>

      </div>
  </div>
</template>

<style scoped lang="scss">
@import "src/styles/Global";

.article__wrapper {
  display: grid;
  position: relative;
  grid-template-columns: 200px 1fr;
}

.topOneArticleContainer {
  /**avoid to take out of parent's BFC */
  // display: contents;
  border-radius: 1rem;
  //min-height:500px;
  /** 圆角边框 **/
  overflow: hidden;
}

.article__cover {
  overflow: hidden;
  object-fit: cover;
  object-position: 72%;
  grid-row: 1 / 2;
  width: 100%;
  height: 100%;
}

.article__body {
  padding: var(--spacing-s);
  grid-row-gap: var(--spacing-s);
  display: block grid;
  grid-template-rows: repeat(12, 1fr);
  max-height: 400px;

  .digest {
    overflow-y: scroll;
    scroll-behavior: smooth;
    grid-row: 2 / -2;
  }

  .footer {
    grid-row: -2 / -1;
  }
}

</style>